import React, { useEffect, useState } from "react";
import { Card, Input, Popconfirm, Form, message, Spin } from "antd";
import api from "@/api/blog/record";
import moment from "moment";
import { getRole } from "@/utils/localStorage"
import { RoleButton, RoleLink } from "@/components/RoleButton"
const { TextArea } = Input;
export default function Index() {
    const [loading, setLoading] = useState(false);
    const [btnLoading, setBtnLoading] = useState(false);
    const [data, setData] = useState([]);
    const [form] = Form.useForm();
    useEffect(() => {
        getList();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    const remove = async (id) => {
        await api.remove({ _id: id });
        getList();
    };
    const getList = async () => {
        setLoading(true);
        const res = await api.getlist();
        setData(res.data.reverse());
        setLoading(false);
    };
    const submit = async () => {
        let valid;
        await form.validateFields().catch(() => {
            valid = true;
        });
        if (valid) return;
        add();
    };
    const add = async () => {
        setBtnLoading(true);
        try {
            let data = Object.assign({ createTime: moment().format("YYYY-MM-DD HH:mm:ss") }, form.getFieldsValue(true));
            let res = await api.add(data);
            message.success(res.msg);
            setBtnLoading(false);
            form.resetFields();
            getList();
        } catch (err) {
            setBtnLoading(false);
        }
    };
    return (
        <div style={{ display: "flex", flexDirection: "column", height: "calc(100vh - 180px)" }}>
            <Form form={form} autoComplete="off">
                <Form.Item name="content" rules={[{ required: true, message: "Please input your content!" }]}>
                    <TextArea rows={4} allowClear={true} placeholder="请输入记录内容" />
                </Form.Item>
            </Form>

            <RoleButton role={getRole()} type="primary" loading={btnLoading} style={{ width: 200, margin: "0 auto 20px auto" }} onClick={submit}>
                提 交
            </RoleButton>

            <Card style={{ overflow: "auto", border: "1px solid rgba(140, 140, 140, 0.35)", flex: 1, padding: 0 }}>
                <Spin spinning={loading}>
                    {data.map((item) => {
                        return (
                            <Card
                                key={item._id} type="inner" style={{ marginBottom: 10 }} title={item.createTime} bordered={true} hoverable={true}
                                extra={
                                    <Popconfirm title="您确认要删除吗？" onConfirm={() => { remove(item._id) }} okText="Yes" cancelText="No">
                                        <RoleLink role={getRole()} type="link" danger>
                                            删 除
                                        </RoleLink>
                                    </Popconfirm>
                                }>
                                {item.content}
                            </Card>
                        );
                    })}
                </Spin>
            </Card>
        </div>
    );
}
